<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: bold;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .message-box {
            border: 1px solid #ddd;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            background-color: #f9f9f9;
            margin: 10px 0;
            font-family: monospace;
        }
        .input-group {
            margin: 10px 0;
        }
        .input-group input {
            width: 70%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .input-group button {
            width: 25%;
            padding: 8px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 5px;
        }
        .input-group button:hover {
            background-color: #0056b3;
        }
        .client-count {
            background-color: #e7f3ff;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>WebSocket测试页面</h1>
        <p>连接到端口12011的WebSocket服务器</p>
        
        <div id="status" class="status disconnected">未连接</div>
        
        <div class="client-count">
            <span>当前连接数: </span>
            <span id="clientCount">0</span>
        </div>
        
        <div class="input-group">
            <input type="text" id="messageInput" placeholder="输入要发送的消息..." />
            <button onclick="sendMessage()">发送消息</button>
        </div>
        
        <button onclick="connect()" id="connectBtn">连接</button>
        <button onclick="disconnect()" id="disconnectBtn" disabled>断开连接</button>
        
        <h3>消息日志:</h3>
        <div id="messages" class="message-box"></div>
    </div>

    <script>
        let ws = null;
        const statusEl = document.getElementById('status');
        const messagesEl = document.getElementById('messages');
        const messageInput = document.getElementById('messageInput');
        const connectBtn = document.getElementById('connectBtn');
        const disconnectBtn = document.getElementById('disconnectBtn');
        const clientCountEl = document.getElementById('clientCount');

        function addMessage(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const messageEl = document.createElement('div');
            messageEl.innerHTML = `<span style="color: #666;">[${timestamp}]</span> <span style="color: ${type === 'error' ? 'red' : type === 'success' ? 'green' : 'black'}">${message}</span>`;
            messagesEl.appendChild(messageEl);
            messagesEl.scrollTop = messagesEl.scrollHeight;
        }

        function updateStatus(connected) {
            if (connected) {
                statusEl.textContent = '已连接';
                statusEl.className = 'status connected';
                connectBtn.disabled = true;
                disconnectBtn.disabled = false;
            } else {
                statusEl.textContent = '未连接';
                statusEl.className = 'status disconnected';
                connectBtn.disabled = false;
                disconnectBtn.disabled = true;
            }
        }

        function connect() {
            try {
                ws = new WebSocket('ws://localhost:12011');
                
                ws.onopen = function(event) {
                    updateStatus(true);
                    addMessage('WebSocket连接已建立', 'success');
                };
                
                ws.onmessage = function(event) {
                    try {
                        const data = JSON.parse(event.data);
                        if (data.type === 'welcome') {
                            addMessage(`服务器消息: ${data.message}`, 'success');
                        } else if (data.type === 'broadcast') {
                            addMessage(`广播消息: ${data.content}`, 'info');
                            if (data.clientCount !== undefined) {
                                clientCountEl.textContent = data.clientCount;
                            }
                        } else {
                            addMessage(`收到消息: ${event.data}`, 'info');
                        }
                    } catch (e) {
                        addMessage(`收到消息: ${event.data}`, 'info');
                    }
                };
                
                ws.onclose = function(event) {
                    updateStatus(false);
                    addMessage('WebSocket连接已关闭', 'error');
                };
                
                ws.onerror = function(error) {
                    addMessage('WebSocket错误: ' + error, 'error');
                };
            } catch (error) {
                addMessage('连接失败: ' + error.message, 'error');
            }
        }

        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }

        function sendMessage() {
            const message = messageInput.value.trim();
            if (message && ws && ws.readyState === WebSocket.OPEN) {
                ws.send(message);
                addMessage(`发送: ${message}`, 'success');
                messageInput.value = '';
            } else if (!message) {
                addMessage('请输入消息内容', 'error');
            } else {
                addMessage('WebSocket未连接', 'error');
            }
        }

        // 回车发送消息
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 页面加载时自动连接
        window.onload = function() {
            addMessage('页面已加载，点击连接按钮连接到WebSocket服务器');
        };
    </script>
</body>
</html>